<template>
<mt-header :title="name">
  <mt-button icon="back" slot="left" @click.prevent="back" v-show="show">{{$t('common.back')}}</mt-button>
  <mt-button slot="right" @click.prevent="refresh" >{{$t('common.refresh')}}</mt-button>
</mt-header>
<div class="page-cell">
  <my-tree2-item :tree="tree">
  </my-tree2-item>
</div> 
</template>

<script>
import MyTree2Item from './MyTree2Item.vue'
import MtHeader from 'mint-ui/lib/header'
import 'mint-ui/lib/header/style.css'
import MtButton from 'mint-ui/lib/button'
import 'mint-ui/lib/button/style.css'

export default {
  props: {
    tree: {
      type: Object,
      required: true
    },
    back: {
      type: Function,
      required: true
    },
    refresh: {
      type: Function,
      required: true
    }
  },
  components: {
    'mt-header': MtHeader,
    'mt-button': MtButton,
    'my-tree2-item': MyTree2Item
  },
  computed: {
    name () {
      return this.tree.curr.name
    },
    show () {
      return this.tree.curr !== this.tree
    }
  }
}
</script>

<style>
</style>